<template>
    <div>
      <div>
        <van-nav-bar title="搜索" left-arrow  @click-left="onClickLeft" /> 
      </div>
      <van-search
      v-model="value"
      show-action
      @search="onSearch"
    >
<div slot="action" @click="onSearch">搜索</div>
</van-search>
        <!--搜索数据库goods表中物品v-for显示出来-->
    <div v-for="(card,index) in searchcards" :key="index" v-show="end">
    <van-card
    v-bind:title="card.goods_name"
    v-bind:desc="card.goods_desc"  
    v-bind:num="card.goods_num"
    v-bind:price="card.goods_price"
    :thumb="card.goods_picture"
    >
     <div slot="footer">
    <van-button size="normal" type="primary" @click="goodDetails(index)">详情</van-button>
    </div>
    </van-card>

    </div>
    <div v-show="!end" align="center">
      <br><br><br>
      <p>没有您要搜索的内容</p>
    </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
data() {
    return {
      
      value:"",
      end:true
    }
  },
  computed:{
      searchcards(){
        return this.$store.state.searchcards
      }
    },
   methods: {
    //返回
    goodDetails(index){
       this.$store.commit('searchdetail',index)   
      this.$router.push({path:'/goodMsg',})
    },
    onClickLeft(index) {      
      this.$store.commit('cleardetail',index)
      this.$router.go(-1)
    },
    onSearch(){
      if(this.value==""){
        this.end=false
      }else{
        axios({
            method: "post",
            url: "http://localhost:3000/Value",
            data: {
            cards: this.$store.state.searchcards,
            value:this.value
            },
            headers: {
            "Content-Type": "text/plain"
            }
        }).then(result => {
               console.log(result);
               if(result.data=="没有数据"){
                 this.end=false
               }else{
               this.$store.state.searchcards=result.data;  
               this.end=true
               }
        })
      }
    }
  }
}
</script>
<style>

</style>
